<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跨域测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .test-section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .success {
            background-color: #d4edda;
            color: #155724;
            border-color: #c3e6cb;
        }
        .error {
            background-color: #f8d7da;
            color: #721c24;
            border-color: #f5c6cb;
        }
        button {
            background: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #0056b3;
        }
        .result {
            margin-top: 10px;
            padding: 10px;
            border-radius: 4px;
            white-space: pre-wrap;
        }
    </style>
</head>
<body>
    <h1>跨域测试页面</h1>
    <p>这个页面用于测试短链接服务的跨域配置是否正常工作。</p>
    
    <div class="test-section">
        <h3>1. 创建短链接测试</h3>
        <button onclick="testCreateShortUrl()">测试创建短链接</button>
        <div id="createResult" class="result"></div>
    </div>
    
    <div class="test-section">
        <h3>2. 获取短链接信息测试</h3>
        <input type="text" id="shortCode" placeholder="输入短链接编码" value="abc123">
        <button onclick="testGetShortUrlInfo()">测试获取短链接信息</button>
        <div id="getResult" class="result"></div>
    </div>
    
    <div class="test-section">
        <h3>3. 获取访问统计测试</h3>
        <button onclick="testGetStatistics()">测试获取访问统计</button>
        <div id="statisticsResult" class="result"></div>
    </div>
    
    <div class="test-section">
        <h3>4. 预检请求测试</h3>
        <button onclick="testPreflight()">测试OPTIONS预检请求</button>
        <div id="preflightResult" class="result"></div>
    </div>

    <script>
        const API_BASE = 'http://localhost:8080/api';
        
        // 测试创建短链接
        async function testCreateShortUrl() {
            const resultDiv = document.getElementById('createResult');
            resultDiv.textContent = '正在测试...';
            
            try {
                const response = await fetch(`${API_BASE}/short-url/create`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        originalUrl: 'https://www.example.com/test-url-' + Date.now(),
                        customCode: 'test' + Date.now().toString().slice(-4),
                        expireDays: 30
                    })
                });
                
                const result = await response.json();
                resultDiv.textContent = `创建短链接测试结果:\n${JSON.stringify(result, null, 2)}`;
                resultDiv.className = 'result success';
            } catch (error) {
                resultDiv.textContent = `创建短链接测试失败:\n${error.message}`;
                resultDiv.className = 'result error';
            }
        }
        
        // 测试获取短链接信息
        async function testGetShortUrlInfo() {
            const resultDiv = document.getElementById('getResult');
            const shortCode = document.getElementById('shortCode').value;
            
            if (!shortCode) {
                resultDiv.textContent = '请输入短链接编码';
                resultDiv.className = 'result error';
                return;
            }
            
            resultDiv.textContent = '正在测试...';
            
            try {
                const response = await fetch(`${API_BASE}/short-url/${shortCode}`);
                const result = await response.json();
                resultDiv.textContent = `获取短链接信息测试结果:\n${JSON.stringify(result, null, 2)}`;
                resultDiv.className = 'result success';
            } catch (error) {
                resultDiv.textContent = `获取短链接信息测试失败:\n${error.message}`;
                resultDiv.className = 'result error';
            }
        }
        
        // 测试获取访问统计
        async function testGetStatistics() {
            const resultDiv = document.getElementById('statisticsResult');
            const shortCode = document.getElementById('shortCode').value || 'abc123';
            
            resultDiv.textContent = '正在测试...';
            
            try {
                const response = await fetch(`${API_BASE}/statistics/overview/${shortCode}`);
                const result = await response.json();
                resultDiv.textContent = `获取访问统计测试结果:\n${JSON.stringify(result, null, 2)}`;
                resultDiv.className = 'result success';
            } catch (error) {
                resultDiv.textContent = `获取访问统计测试失败:\n${error.message}`;
                resultDiv.className = 'result error';
            }
        }
        
        // 测试预检请求
        async function testPreflight() {
            const resultDiv = document.getElementById('preflightResult');
            resultDiv.textContent = '正在测试OPTIONS预检请求...';
            
            try {
                const response = await fetch(`${API_BASE}/short-url/create`, {
                    method: 'OPTIONS',
                    headers: {
                        'Access-Control-Request-Method': 'POST',
                        'Access-Control-Request-Headers': 'Content-Type',
                    }
                });
                
                const headers = {};
                response.headers.forEach((value, key) => {
                    headers[key] = value;
                });
                
                resultDiv.textContent = `预检请求测试结果:\n状态码: ${response.status}\n响应头:\n${JSON.stringify(headers, null, 2)}`;
                resultDiv.className = 'result success';
            } catch (error) {
                resultDiv.textContent = `预检请求测试失败:\n${error.message}`;
                resultDiv.className = 'result error';
            }
        }
        
        // 页面加载时显示当前时间
        document.addEventListener('DOMContentLoaded', function() {
            console.log('跨域测试页面加载完成，当前时间:', new Date().toLocaleString());
        });
    </script>
</body>
</html>
